<template>
  <el-card style="min-width: 1400px" >
    <el-table :data="data.tableData" stripe class="table">
      <el-table-column type="selection"/>
      <el-table-column align="center" width="50px" type="index" label="序号"/>
      <el-table-column align="center" width="120px" label="账号" prop="username"/>
      <el-table-column align="center" width="120px" label="真实姓名" prop="realName"/>
      <el-table-column align="center" width="120px" label="密码" prop="password"/>
      <el-table-column align="center" width="80px" label="性别" prop="gender">
        <template #default="scope">
          {{scope.row.gender===1?"男":"女"}}
        </template>
      </el-table-column>
      <el-table-column align="center" width="120px" label="出生日期" prop="birthdate">
        <template #default="scope">
          {{ scope.row.birthdate ? scope.row.birthdate.split(' ')[0] : '' }}
        </template>
      </el-table-column>
      <el-table-column align="center" width="120px" label="手机号" prop="phone"/>
      <el-table-column align="center" width="120px" label="电子邮件" prop="email"/>
      <el-table-column align="right" width="120px" label="启用状态" prop="isActive" >
        <template #default="scope">
          <el-switch v-model="scope.row.isActive" :active-value="1" :inactive-value="0"
                     style="--el-switch-on-color: #027a6d; --el-switch-off-color: #ffc107" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" prop="" >
        <template #default="scope">
          <el-button-group>
              <el-button type="primary"><el-icon><GobletSquareFull/></el-icon></el-button>
              <el-button type="warning"><el-icon><Edit /></el-icon></el-button>
              <el-button type="danger"><el-icon><Delete /></el-icon></el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
      <el-pagination
          v-model:current-page="data.pageData.pageNum"
          v-model:page-size="data.pageData.pageSize"
          :page-sizes="[100, 200, 300, 400]"
          :size="'default'"
          layout="total, sizes, prev, pager, next, jumper"
          :total="data.pageData.pageTotal"
          @size-change="load()"
          @current-change="load()"
          style="margin-top: 15px;display: flex;justify-self: center;"
      />
  </el-card>
</template>

<script setup>
import { reactive } from "vue";
import request from "../../../utils/requests.js";


const switchValue = (val) => {
  return val === 1;
}


const data=reactive({
  pageData:{
    pageSize:10,
    pageNum:1,
    pageTotal:0
  },
  tableData: [] // 表格数据
});


const getTableData=()=>{
  request.post("/user/page",
      {
        pageSize:data.pageData.pageSize,
        pageNum:data.pageData.pageNum
      }
  ).then((res) => {
    data.tableData=res.data.list;
    data.pageData.pageNum=res.data.pageNum;
    data.pageData.pageSize=res.data.pageSize;
    data.pageData.pageTotal=res.data.total;
  });
}

/**
 * 每页条数变化时触发
 */
const handleSizeChange = (newSize) => {
  data.pageData.pageSize = newSize;
  data.pageData.pageNum = 1; // 重置为第一页
  getTableData();
};

/**
 * 当前页码变化时触发
 */
const handleCurrentChange = (newPage) => {
  data.pageData.pageNum = newPage;
  getTableData();
};

const load=()=>{
  getTableData();
}

load()
/**
 * 查看活动信息
 */
const viewActivity = (row) => {
  console.log("查看活动信息：", row);
  // TODO: 实现跳转到活动信息页面或弹出对话框
};

/**
 * 编辑用户信息
 */
const editUser = (row) => {
  console.log("编辑用户：", row);
  // TODO: 实现跳转到编辑页面或弹出编辑对话框
};

/**
 * 删除用户
 */
const deleteUser = (row) => {
  console.log("删除用户：", row);
  // TODO: 实现删除逻辑（例如发送 DELETE 请求）
};
</script>

<style scoped lang="scss">
/* 样式可以根据需要自定义 */
.el-card {
  margin: 20px;
}

.el-table {
  margin-bottom: 20px;
}
</style>